<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <title>列表</title>
    <link rel="stylesheet" href="__STATIC__/component/pear/css/pear.css"/>
    {include file='public/head.html'}
</head>
<body class="pear-container">

<div class="layui-card">
    <div class="layui-card-body">
        <table class="layui-hide" id="currentTable" lay-filter="currentTable"
               data-auth-add="{:check_auth('add')}"
               data-auth-edit="{:check_auth('edit')}"
               data-auth-delete="{:check_auth('del')}"
               data-auth-modify="{:check_auth('multi')}"
        ></table>
    </div>
</div>

<!-- 顶部工具 -->
<script type="text/html" id="table-toolbar">
    <button class="layui-btn layui-btn-sm aphp-btn-primary" data-table-refresh="currentTable">
        <i class="layui-icon layui-icon-refresh"></i>
    </button>
    <button class="layui-btn layui-btn-sm" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        <span class="layui-hide-xs"> 新增</span>
    </button>
    <button class="layui-btn layui-btn-normal layui-btn-sm" id="openAll">
        <i class="layui-icon layui-icon-spread-left"></i>
        <span class="layui-hide-xs"> 展开或折叠</span>
    </button>
</script>

<script src="__STATIC__/component/layui/layui.js"></script>
<script src="__STATIC__/component/pear/pear.js"></script>
<script>
    layui.use(['table', 'form', 'aphp', 'treeTable', 'aphpTable'], function () {
        var $ = layui.$;
        var treeTable = layui.treeTable;
        var aphpTable = layui.aphpTable;
        var aphp = layui.aphp;
        var table = layui.table;

        var init = {
            table_elem: '#currentTable',
            table_render_id: 'currentTable',
            add_url: "{:url('add')}",
            edit_url: "{:url('edit')}",
            delete_url: "{:url('del')}",
            modify_url: "{:url('multi')}",
        };

        treeTable.render({
            init: init,
            id: 'currentTable',
            elem: init.table_elem,
            toolbar: '#table-toolbar',
            response: {statusCode: 200},
            url: "{:url('index')}",
            tree: {
                customName: {
                    children: 'children',
                    pid: 'pid',
                    name: 'title'
                },
                view: {
                    showIcon: false
                }
            },
            escape: false,
            cols: aphpTable.colsFormat([[
                {title: '排序', field: 'sort', edit: 'text'},
                {title: 'ID', field: 'id', align: 'center'},
                {title: '名称', field: 'title'},
                {title: '图标', field: 'icon', templet: '<div><i class="layui-icon {{d.icon}}"></i></div>'},
                {title: '类型', field: 'type', templet: aphpTable.formatter.label, selectList: {0: '目录', 1: '菜单'}},
                {title: '权限', field: 'auth'},
                {
                    title: '状态',
                    field: 'status',
                    align: 'center',
                    unresize: true,
                    templet: aphpTable.formatter.switch
                },
                {
                    title: '操作',
                    width: 120,
                    align: 'center',
                    templet: aphpTable.formatter.tool,
                    operat: ['edit', 'delete']
                }
            ]], init),
        });

        //顶部工具
        table.on('toolbar(currentTable)', function (obj) {
            if (obj.event === 'add') {
                aphp.open('新增', "{:url('add')}", 800, 600);
            }
        });

        $(document).on('click', '#openAll', function () {
            var that = this;
            var show = $("i", that).hasClass("layui-icon-spread-left");
            treeTable.expandAll("currentTable", show);
            $("i", that).toggleClass("layui-icon-spread-left", !show);
            $("i", that).toggleClass("layui-icon-shrink-right", show);
        });

        aphpTable.listenSwitch({filter: 'status', url: init.modify_url});
        aphpTable.listenFieldEdit(init, 'currentTable', init.table_render_id, true);
        aphpTable.bindEvent();
    });
</script>
</body>
</html>